<template>
  <div class="sear">
    <div class="img">
      <img @click="back" src="../assets/返回.png" alt="">
    </div>
    <Search @isShow="accept" :addText="value"></Search>
    <ul v-if="!isShowlist" class="hot">
      <li v-for="(item,index) in hotArr" @click="addText(index)">{{item}}</li>
    </ul>
    <ul v-if="isShowlist" class="songList">
      <li v-for="item in songList" >
        <router-link :to="{ path: '/songplay', query: { id: item.id, type: 'sousuo' } }">
        <div class="songname">{{item.name}}</div>
        <div class="singer">{{item.artists[0].name}}</div>
      </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import Search from '@/components/Search'
export default {
  data() {
    return {
      isShowlist: false,
      hotArr:[],
      songList:[],
      value:'',
      songList:[]
    }
  },
  components: {
    Search
  },
  created() {
    this.getHotSongFn()
  },
  methods: {
    async getSearchSong() {
     
      try {
        const response = await this.$axios.get(`https://apis.netstart.cn/music/search?keywords=${this.value}`);
        // console.log(response.data.result.songs);
        this.songList = [],
        response.data.result.songs.forEach(element => {
          let {name,artists,id} = element
          // console.log(name,artists);
          let obj = {}
          obj.name = name
          obj.artists = artists
          obj.id = id
          this.songList.push(obj)
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // console.log(this.songList);
    },

    addText(index){
      this.value = this.hotArr[index]
      // console.log(this.value);
      this.getSearchSong()
      this.isShowlist = true
    },
    accept(data){
      // console.log(data);
      this.isShowlist = data.isShowlist
      this.songList = data.songList
      console.log(this.songList);
    },
    back() {
      this.$router.replace({ path: '/' })
    },
    async getHotSongFn() {
      try {
        const response = await this.$axios.get(`https://apis.netstart.cn/music/search/hot`);
        // console.log(response.data.result.hots);
        response.data.result.hots.forEach(element => {
          this.hotArr.push(element.first)
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // console.log(this.hotArr);
    },
  }
}
</script>
<style lang="less">
@import "../style/variable.less";
.songList{
  width: 94%;
  background-color: #ccbcfe;
  margin: 20px auto;
  overflow: auto;
  border-radius: 5px;
  li{
    margin: 10px;
    width: 96%;
    background-color: #b19eeb;
    height: 60px;
    margin: 10px auto;
    border-radius: 5px;
    a{
      color: #fff;
      .songname{
        padding: 0 10px;
        font-size: 22px;
      }
      .singer{
        padding: 0 10px;
        font-size: 16px;
      }
    }
  }
}

.hot {
  width: 96%;
  background-color: #ccbcfe;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;

  li {
    height: 40px;
    padding: 0 10px;
    line-height: 40px;
    border-radius: 10px;
    background-color: #7f5ee0;
    color: #fff;
    margin: 10px;
    font-size: 16px;
  }
}

.sear {
  font-family: "logotext";
  background-color: #e3e0eb;
  width: 100%;
  height: 100%;
  overflow: auto;
  .img {
    height: 50px;
    margin-left: 10px;
    margin-top: 10px;
  }
}
</style>
